<template>
  <div>
    <div class="header" @click="$router.push('/edit')">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
      />

      <img v-else src="@/images/tujianmai.jpg" alt />
      <div class="nickname">
        <p>
          <!--  判断用户信息的userInfo的gender如果是1就显示男图标 如果是0 就先是女 -->
          <van-icon v-if="userInfo.gender == 1" name="manager-o" class="icon" />
          <van-icon v-if="userInfo.gender == 0" name="user-o" class="icon1" />
          {{ userInfo.nickname }}
        </p>
        <div class="date">2020-8-8</div>
      </div>
      <div>
        <van-icon name="arrow" class="arrow" />
      </div>
    </div>
    <PersonalCell
      title="我的关注"
      subhead="关注的用户"
      @normalClick="$router.push('/focus')"
    />
    <PersonalCell
      title="我的跟帖"
      subhead="跟帖 / 回复"
      @normalClick="$router.push('/followup')"
    />
    <PersonalCell
      title="我的收藏"
      subhead="文章 / 视频"
      @normalClick="$router.push('/collect')"
    />
    <PersonalCell title="设置" @normalClick="$router.push('/edit')" />
    <PersonalCell title="退出" @normalClick="loginOut" />

    <div>
      <AuthBtn btnText="返回首页" @submit="$router.push('/')" />
    </div>
  </div>
</template>

<script>
import PersonalCell from "../../components/PersonalCell";
import AuthBtn from "../../components/AuthBtn";
export default {
  data() {
    return {
      // 用来接收后台数据方便渲染页面
      userInfo: "",
    };
  },
  //created()是钩子函数 可以获取初始化所需的数据
  created() {
    // 页面创建成功, 可以拿到 token
    console.log(localStorage.getItem("token"));

    // 页面一进需要马上获取数据
    this.$axios({
      url: "/user/ " + localStorage.getItem("userId"),
      // 需要在请求头上带上token 验证
      headers: {
        // Authorization 是一个字段, 带上 token 即可
        // 这个 token 是一个叫做 jwt 的 bearer 类型 token
        // 他的标准应该在 token 的前方添加 "Bearer "
        // 当前服务器,做了适配, 即使你忘记了 Bearer 也不报错, 标准上是要加的
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    }).then((res) => {
      // console.log(res.data);

      // 不能保证进来的用户都是有权限的
      if (res.data.message == "获取成功") {
        // 成功后赋值渲染
        this.userInfo = res.data.data;
        //否则清除所有错误信息 再跳转到登录页----> main.js---->axios.interceptors.response.use
      }
    });
  },
  //    注册子组件
  components: {
    PersonalCell,
    AuthBtn,
  },
  methods: {
    byClick(newinfo) {
      console.log(newinfo);
    },
    loginOut() {
      // 点击退出后清除所有数据
      localStorage.clear();
      // 防止后退的时候重新跳转回个人中心 这是不合理的
      this.$router.replace("/login");
    },
  },
};
</script>

<style   lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  padding: 25/360 * 100vw;
  border-bottom: 5px solid #e4e4e4;
  img {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    border-radius: 50%;
    // 保持图片等比例显示
    object-fit: cover;
  }
  .nickname {
    flex: 1;
    padding-left: 12/360 * 100vw;
    .icon {
      color: #90c6ee;
      padding-bottom: 8/360 * 100vw;
    }
    .icon1 {
      color: #f92672;
    }
  }
  .date {
    color: #a4a4a4;
  }
  .arrow {
    color: #a4a4a4;
  }
}
</style>